/**
 * Created by Administrator on 16/05/26.
 */
(function (w) {
    var _param = {
        "width": 80,
        "margin": 10
    };

    w.initChart = function (param) {
        _param = extend(_param, param);
        initData(_param);
        addCanvasDOM(_param);
        drawFrame(_param);
    };


    function extend(a, b) {
        for (var key in b) {
            a[key] = b[key];
        }
        return a;
    }


    function initData(param) {
        var obj = document.getElementById(param.id);
        var width = obj.clientWidth;
        var height = obj.clientHeight;
        param.width = width;
        param.height = height;
        param.startPoint = {"x": param.margin, "y": param.margin};
        param.canvasWidth = width - param.margin * 2;
        param.canvasHeight = height - param.margin * 2;
    };

    function drawFrame(param) {
        var ctx = param.canvas.getContext("2d");
        ctx.beginPath()
        ctx.rect(param.startPoint.x, param.startPoint.y, param.canvasWidth, param.canvasHeight);
        ctx.stroke();
        ctx.closePath();
    }


    function addCanvasDOM(param) {
        var obj = document.getElementById(param.id);
        var canvas = document.createElement("canvas");
        canvas.width = param.width;
        canvas.height = param.height;
        obj.appendChild(canvas);
        param.canvas = canvas;
    }


})(window)
window.onload = function () {
    var param = {
        "id": "chart",
        "height": 50
    };
    initChart(param);
};
